<template>
	<view>
		<view v-if="loading" class="page-loading"><u-loading mode="circle"></u-loading></view>
		<!-- 主要内容 -->
		<view v-else class="page-main">
			<view class="order-header">
				<view class="u-tabs-box">
					<u-tabs-swiper activeColor="#10beca" ref="tabs"
						:list="statusArr" :current="state" @change="change" :is-scroll="false" swiperWidth="750">
					</u-tabs-swiper>
				</view>
				<list-filter-panel @filter-change="filterChange"></list-filter-panel>
			</view>
			
			<view v-if="rechargeList.length > 0">
				<u-cell-group>
					<u-cell-item v-for="(item,index) in rechargeList" :key="index" @click="goDetails(item)">
						<view slot="title">
							<view><text class="u-font-32">{{item.franchise.name}}</text></view>
							<view><text class="u-font-28 u-tips-color">汇款账户：{{item.account.bankname}}</text></view>
							<view><text class="u-font-28 u-tips-color">到账时间：{{item.createddatetime}}</text></view>
							<view>
								<text class="u-font-28 u-tips-color">审核状态：</text>
								<text v-if="item.state == '已充值'" class="u-main-color u-font-28 color-success">{{item.state}}</text>
								<text v-else class="u-main-color u-font-28 color-danger">{{item.state}}</text>
							</view>
						</view>
						<!-- 变动类型 -->
						<view><text class="u-font-28">{{item.type}}</text></view>
						<!-- 余额增减记录 -->
						<view>
							<text class="u-main-color u-font-32 color-success">+{{utils.formatMoney(item.amount)}}</text>
						</view>
					</u-cell-item>
				</u-cell-group>
				<view class="u-p-t-30">
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
			</view>
			<view v-else class="nomore u-p-t-80 u-p-b-40">
				<u-empty text="您还没有相关的记录" mode="list"></u-empty>
			</view>
		</view>
		<!--  -->
		<u-popup v-model="show" mode="bottom" border-radius="14" z-index="999" closeable>
			<view v-if="show">
				<view class="u-text-center u-p-30"><text class="u-font-32">充值申请详情</text></view>
				<u-cell-group>
					<u-cell-item title="单据编号" :arrow="false">{{form.number}}</u-cell-item>
					<u-cell-item title="充值加盟商" :arrow="false">{{form.franchise.name}}</u-cell-item>
					<u-cell-item title="充值金额" :arrow="false">{{utils.formatMoney(form.amount)}}</u-cell-item>
					<u-cell-item title="汇款账户" :arrow="false">{{form.account.name}}</u-cell-item>
					<u-cell-item v-if="form.arrivaldate" title="到账时间" :arrow="false">{{form.arrivaldate}}</u-cell-item>
					<u-cell-item title="申请人" :arrow="false">{{form.createusername}}</u-cell-item>
					<u-cell-item title="申请时间" :arrow="false">{{form.createddatetime}}</u-cell-item>
					<u-cell-item v-if="form.examinename" title="审核人" :arrow="false">{{form.examinename}}</u-cell-item>
					<u-cell-item v-if="form.examinedate" title="审核时间" :arrow="false">{{form.examinedate}}</u-cell-item>
					<u-cell-item title="审核状态" :arrow="false">{{form.state}}</u-cell-item>
					<u-cell-item title="上传凭证" :arrow="true" @click="previewImage(form.proves)">
						<view class="u-flex" style="justify-content: right;">
							<u-image width="120rpx" height="120rpx" :src="form.proves"></u-image>
						</view>
					</u-cell-item>
				</u-cell-group>
				<view class="u-p-30 u-flex" v-if="form.state == '未审核'">
					<view class="u-flex-1 u-p-r-30"><u-button type="error" @click="reject(form)">驳回</u-button></view>
					<view class="u-flex-1"><u-button type="primary" @click="examine(form)">审核</u-button></view>
				</view>
			</view>
		</u-popup>
		<!-- 审核 -->
		<u-modal
			v-model="examineDialogVisible" 
			:show-cancel-button="true" 
			:negative-top="200" 
			title="审核"
			@confirm="confirmExamine"
			>
			<scroll-view :scroll-y="true" class="slot-content">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<u-form label-width="140rpx">
						<u-form-item label="到账时间" prop="arrivaldate" required>
							<u-input v-model="examineForm.arrivaldate" type="select" :border="true" @click="showArrivaldate = true"/>
							<u-picker v-model="showArrivaldate" mode="time" :params="params" @confirm="confirmArrivaldate"></u-picker>
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
		</u-modal>
		<!-- 驳回 -->
		<u-modal
			v-model="rejectVisible" 
			:show-cancel-button="true" 
			:negative-top="200" 
			title="驳回"
			@confirm="confirmReject"
			>
			<scroll-view :scroll-y="true" class="slot-content">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<u-form label-width="140rpx" label-position="top">
						<u-form-item label="请填写驳回原因：" prop="reason" required>
							<u-input v-model="rejectForm.reason" type="textarea" :border="true" />
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				loadStatus: 'loadmore',
				PageIndex: 1,
				PageSize: 20,
				key: '',
				statusArr: [
					{
						name: '全部',
						value: null
					},
					// {
					//   name: '待派单',
					//   value: 0
					// },
					{
						name: '未审核',
						value: 1
					},
					{
						name: '已审核',
						value: 2
					},
				],
				state: 0, //状态
				rechargeList: [],
				// 弹窗
				show: false,
				form:{},
				// 审核
				examineDialogVisible: false,
				examineForm: {
					id: 0,
					arrivaldate: ''
				},
				// 驳回
				rejectVisible: false,
				rejectForm: {
					id: 0,
					reason: ''
				},
				// 到账时间
				showArrivaldate: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.rechargeList = []
			this.pageIndex = 1
			this.getList(true).then(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		onReachBottom(e) {
			this.reachBottom()
		},
		methods: {
			reachBottom() {
				// 此tab为空数据
				this.PageIndex += 1
				if (this.loadStatus == 'loadmore') {
					this.getList()
				}
			},
			filterChange(obj){
				console.log('filterChange',obj)
				for(let key in obj){
					this.$set(this,key,obj[key])
				}
				// this.getOrderList(true);
			},
			// tab栏切换
			change(index) {
				this.PageIndex = 1;
				this.state = index;
				this.rechargeList = [];
				this.getList();
			},
			getList(reload = false) {
				this.loading = true
				if(reload){
					this.PageIndex = 1
					this.list = []
				}
				this.loadStatus = "loading"
				return this.$u.post('/Franchise/Recharge/List', {
					"pageIndex": this.PageIndex,
					"pageSize": this.PageSize,
					"key": this.key,
					"timeType": this.timeType,
					"startDate": this.startDate,
					"endDate": this.endDate,
					"franchiseId": this.innerFranchiseId || 0,
					// "state": this.statusArr[this.state].value,
					// "searchDateType": 0, //搜索时间类型\n0：创建时间\n1：审核时间\n2：到账时间
					// "accountId": 0,
				}).then((res) => {
					console.log(res)
					this.loading = false
					// let datas = res.rows
					// datas.forEach((item)=>{
					// 	item.proves = this.fileURL + item.proves
					// })
					// this.rechargeList = datas;
					
					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							item.proves = this.fileURL + item.proves
							this.rechargeList.push(item)
						})
						if (res.rows.length < this.PageSize) {
							this.loadStatus = "nomore"
						} else {
							this.loadStatus = "loadmore"
						}
					} else {
						this.loadStatus = "nomore"
					}
				}).catch(() => {
					this.loading = false
				})
			},
			goDetails(item){
				this.form = item
				this.show = true
			},
			previewImage(url){
				// 预览图片
				uni.previewImage({
					urls: [url]
				});
			},
			// 到账时间
			confirmArrivaldate(e){
				console.log(e)
				this.examineForm.arrivaldate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd hh:MM');
			},
			// 发起审核
			examine(row){
				this.examineForm.id = row.id
				this.examineDialogVisible = true
			},
			// 确认审核提交
			confirmExamine() {
				this.$u.post('/Franchise/Recharge/Examine',{
					id: this.examineForm.id,
					arrivaldate: this.examineForm.arrivaldate
				}).then((res) => {
					uni.showToast({
						title: res.msg
					})
					this.getList()
					this.examineDialogVisible = false
					// resolve()
				})
			},
			// 驳回
			reject(row) {
				this.rejectForm.id = row.id
				this.rejectVisible = true
			},
			// 确认驳回
			confirmReject() { 
				this.$u.post('/Franchise/Recharge/Reject',{
					id: this.rejectForm.id,
					reason: this.rejectForm.reason
				}).then((res) => {
					uni.showToast({
						title: res.msg
					})
					this.getList()
					this.rejectVisible = false
				})
			},
		}
	}
</script>

<style>

</style>
